<template>
    <div id="StudyTime"></div>
  
    <!-- <dv-border-box-10 :color="['#50649a', '#50649b']"></dv-border-box-10> -->
</template>

<script>
import * as echarts from "echarts/core";
import {
  TitleComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent,
} from "echarts/components";
import { ScatterChart } from "echarts/charts";
import { UniversalTransition } from "echarts/features";
import { CanvasRenderer } from "echarts/renderers";
import pubsub from "pubsub-js";
export default {
  name: "StudyTime",
  data() {
    return {
      stuId: "",
    };
  },
  watch: {
    // stuId() {
    //   this.initialize();
    // },
  },
  mounted() {
    this.pubId = pubsub.subscribe("selectStuInfo", (msgName, data) => {
      console.log("自律打卡订阅个人信息,", data);
      this.stuId = data.stuId;
      this.initialize();
    });
    this.initialize();
  },
  methods: {
    initialize() {
      echarts.use([
        TitleComponent,
        TooltipComponent,
        GridComponent,
        LegendComponent,
        ScatterChart,
        CanvasRenderer,
        UniversalTransition,
      ]);

      var chartDom = document.getElementById("StudyTime");
      var myChart = echarts.init(chartDom);
      var option;

      // 横坐标
      const days = Array.from({ length: 31 }, (_, i) => String(i + 1));

      // 纵坐标
      // 纵坐标
      const month = [
        "一月",
        "二月",
        "三月",
        "四月",
        "五月",
        "六月",
        "七月",
        "八月",
        "九月",
        "十月",
        "十一月",
        "十二月",
      ];
      function generateRandomNumbers(min, max, quantity) {
        if (quantity < 0 || max - min + 1 < quantity) {
          return "Invalid input";
        }

        let numbers = new Set();

        while (numbers.size < quantity) {
          numbers.add(Math.floor(Math.random() * (max - min + 1)) + min);
        }

        return Array.from(numbers);
      }

      // const minNumber = 1; // 最小值
      // const maxNumber = 100; // 最大值
      // const quantity = Math.floor(Math.random() * 21) + 10; // 生成10到30之间的随机数量

      // const randomNumbers = generateRandomNumbers(minNumber, maxNumber, quantity);
      // console.log(randomNumbers);

      // 进行学习
      //横坐标是天0-30，纵坐标是月份0-11
      const currentDate = new Date();
      const currentMonth = currentDate.getMonth() + 1; // 获取当前月份（注意：JavaScript中月份从0开始）
      const currentDay = currentDate.getDate(); // 获取当前日期

      let study = [];
      // console.log("当前日期,", currentMonth, currentDay);
      for (let month = 0; month < currentMonth; month++) {
        // console.log(month);
        let maxNumber = 0;
        let quantity = Math.floor(Math.random() * 21) + 5; // 生成10到30之间的随机数量
        if (
          month == 1 ||
          month == 3 ||
          month == 5 ||
          month == 7 ||
          month == 8 ||
          month == 10 ||
          month == 12
        ) {
          maxNumber = 31;
        } else if (month == 2) {
          maxNumber = 28;
        } else {
          maxNumber = 30;
        }
        let randomNumbers = generateRandomNumbers(0, maxNumber, quantity);
        // console.log(randomNumbers);
        for (let index = 0; index < randomNumbers.length; index++) {
          let point = [];
          if (month == currentMonth - 1 && randomNumbers[index] > currentDay) {
            continue;
          }
          point.push(randomNumbers[index]);
          point.push(month);
          study.push(point);
        }
      }

      // console.log(study);

      // 显示的点
      const data = [];
      for (let i = 0; i < 31; i++) {
        for (let j = 0; j < 12; j++) {
          // 排除不存在的月份日期
          if (
            !(
              (j === 1 && i > 27) ||
              ((j === 3 || j === 5 || j === 8 || j === 10) && i === 30)
            )
          ) {
            data.push([i, j, j + 1 + "月" + days[i] + "日"]);
          }
        }
      }

      option = {
        title: {
          text: "学习成就来自律打卡",
          color:"#fff",
          top: -5,
          textStyle: {
            color: "#fff",
            fontSize: 25, // 设置标题文字大小为18px
            fontWeight: "bold", // 设置标题文字加粗
            fontFamily: "宋体",
          },
        },
        legend: {
          selectedMode: "single",
          data: ["学习超过30分钟"],
          left: "right",
          textStyle: {
            color: "#fff", // 设置图例文本颜色
          },
          itemStyle: {
            color: "#4ED0FC", // 设置图例小标填充颜色
          },
        },
        tooltip: {
          position: "top",
          formatter: function (params) {
            const date = params.value[2];
            const isStudied = study.some(
              ([x, y]) => x === params.value[0] && y === params.value[1]
            );
            if (isStudied) {
              return "日期： " + date + "<br/>打卡状态： 已打卡";
            } else {
              return "日期： " + date + "<br/>打卡状态： 未打卡";
            }
          },
        },
        grid: {
          top: 35,
          left: 10,
          bottom: 0,
          right: 10,
          containLabel: true,
        },
        xAxis: {
          type: "category",
          data: days,
          boundaryGap: false,
          // splitLine: {
          //     show: true,
          // },
          axisLine: {
            show: false,
          },
          axisLabel: {
            // interval: 0, // 强制显示所有类目
            margin: 10, // 设置文字与坐标轴之间的间距
            textStyle: {
                color: '#fff', // 设置标签文本颜色
                fontSize: 19, // 设置标签文本字体大小
                // 还可以添加其他样式属性，比如 fontFamily 等
            }
          },
        },
        yAxis: {
          type: "category",
          data: month,
          axisLine: {
            show: false,
          },
          axisLabel: {
            interval: 0, // 强制显示所有类目
            margin: 25, // 设置文字与坐标轴之间的间距
            textStyle: {
                color: '#fff', // 设置标签文本颜色
                fontSize: 14, // 设置标签文本字体大小
                // 还可以添加其他样式属性，比如 fontFamily 等
            }
          },
        },
        series: [
          {
            name: "学习超过30分钟",
            symbol: "square",
            type: "scatter",
            symbolSize: 15, // 调整小方块的大小，减小数值可以缩小间距
            data: data,
            animationDelay: function (idx) {
              return idx * 5;
            },
            itemStyle: {
              color: function (params) {
                for (let point of study) {
                  if (
                    params.value[0] === point[0] &&
                    params.value[1] === point[1]
                  ) {
                    return "#4ED0FC"; // 将指定坐标位置的点颜色设为橙色
                  }
                }
                return "rgba(206, 255, 255,.3)"; // 其他点的颜色为白色
              },
              borderColor: "#00FFFF", // 添加边框
            },
          },
        ],
      };

      option && myChart.setOption(option);
    },
  },
  beforeDestroy() {
    pubsub.unsubscribe(this.pubId);
  },
};
</script>

<style>
#StudyTime {
  width: 100%;
  height: 100%;
  padding: 0px 50px;
  border-radius: 10px;
}
</style>
